<template>
  <div class="row q-gutter-sm my-tool-group">
    <ToolGroupItem :btn-list="doArr"/>
    <ToolGroupItem :btn-list="alignArr"/>
    <ToolGroupItem :btn-list="rotateArr"/>
    <ToolGroupItem :btn-list="layerArr"/>
    <ToolGroupItem :btn-list="editArr"/>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { EnumEditorEvent } from 'stores/editorModels';
import { useEditorEvent } from 'src/hook/editor/useEditorEvent';
import ToolGroupItem from 'components/common/ToolGroupItem.vue';
import { useEditorExecPageComponents } from 'src/hook/editor/useEditorExecPageComponents';
import { useEditorExecModPageComponent } from 'src/hook/editor/useEditorExecModPageComponent';
import { useRouter } from 'vue-router';
import { useEditorStore } from 'stores/editorStore';
import { storeToRefs } from 'pinia';
import { useSelectedTuple } from 'src/hook/editor/useSelectedTuple';



export default defineComponent({
  name: 'ToolGroup',
  components: {
    ToolGroupItem
  },

  setup (props, context) {
    //*********************************************************
    // 路由、store
    //*********************************************************
    const curRouter = useRouter();
    const store = useEditorStore();
    const {
      project,
      pageType,
      canvas
    } = storeToRefs(store);
    //*********************************************************
    // 实现基本功能
    // *********************************************************
    const {
      removeSelectedItems,
      copySelectedItems,
      pasteSelectedItems,
      alignSelectedItems,
      rotateSelectedItems,
      setSelectedTopLayer,
      setSelectedBottomLayer
    } = useEditorEvent();

    //*********************************************************
    // 选择
    // *********************************************************
    const {
      selectAllTuple
    } = useSelectedTuple();

    //*********************************************************
    // 实现拖拽生成组件、保存组件、删除组件、更新页面组件
    //*********************************************************
    const {
      saveCurrentPageInfo
    } = useEditorExecPageComponents();

    const {
      saveModuleCurrentPage
    } = useEditorExecModPageComponent();

    //左对齐
    const leftAlign = () => {
      alignSelectedItems(EnumEditorEvent.EDITOR_BTN_EVT_LEFT_ALIGN)
    };

    //右对齐
    const rightAlign = () => {
      alignSelectedItems(EnumEditorEvent.EDITOR_BTN_EVT_RIGHT_ALIGN)
    };

    //水平居中对齐
    const hrCenterAlign = () => {
      alignSelectedItems(EnumEditorEvent.EDITOR_BTN_EVT_HR_CENTER_ALIGN)
    };

    //上对齐
    const topAlign = () => {
      alignSelectedItems(EnumEditorEvent.EDITOR_BTN_EVT_TOP_ALIGN)
    };

    //下对齐
    const bottomAlign = () => {
      alignSelectedItems(EnumEditorEvent.EDITOR_BTN_EVT_BOTTOM_ALIGN)
    };

    //垂直居中对齐
    const vrCenterAlign = () => {
      alignSelectedItems(EnumEditorEvent.EDITOR_BTN_EVT_VR_CENTER_ALIGN)
    };

    //左旋转90°
    const negativeRotate = () => {
      rotateSelectedItems(EnumEditorEvent.EDITOR_BTN_EVT_NEGATIVE_ROTATE);
    }

    //右旋转90°
    const positiveRotate = () => {
      rotateSelectedItems(EnumEditorEvent.EDITOR_BTN_EVT_POSITIVE_ROTATE);
    }

    //保存模板
    const onSaveModule = () => {
      saveModuleCurrentPage();
    }


    //保存组件
    const onSavePage = () => {
      //先保存
      saveCurrentPageInfo();
    }

    //预览
    const onPreviewPage = () => {
      let route = {
        name: 'View',
        path: '/preview'
      };

      //使用query指定name,path都行
      curRouter.push({
        path: route.path,
        query: {
          projectId: project.value.id,
          projectName: project.value.cname,
          pageType: pageType.value,
          pageId: canvas.value.id
        }
      });
    }

    //置顶
    const setTopLayer = () => {
      setSelectedTopLayer();
    }

    //置底
    const setBottomLayer = () => {
      setSelectedBottomLayer();
    }

    //按钮数组
    let alignArr = [
      {
        label: '左对齐',
        icon: 'mdi-format-align-left',
        callback: leftAlign
      },
      {
        label: '右对齐',
        icon: 'mdi-format-align-right',
        callback: rightAlign
      },
      {
        label: '水平居中',
        icon: 'mdi-format-align-center',
        callback: hrCenterAlign
      },
      {
        label: '上对齐',
        icon: 'mdi-format-vertical-align-top',
        callback: topAlign
      },
      {
        label: '下对齐',
        icon: 'mdi-format-vertical-align-bottom',
        callback: bottomAlign
      },
      {
        label: '垂直居中',
        icon: 'mdi-format-vertical-align-center',
        callback: vrCenterAlign
      }
    ];

    //事物撤销与还原
    const doArr = [
      {
        label: '全选',
        icon: 'mdi-select-all',
        callback: selectAllTuple
      },
      {
        label: '撤销',
        icon: 'mdi-undo-variant',
        callback: bottomAlign
      },
      {
        label: '恢复',
        icon: 'mdi-redo-variant',
        callback: vrCenterAlign
      }
    ];

    //旋转
    let rotateArr = [
      {
        label: '左旋转90°',
        icon: 'mdi-rotate-left-variant',
        callback: negativeRotate
      },
      {
        label: '右旋转90°',
        icon: 'mdi-rotate-right-variant',
        callback: positiveRotate
      }
    ];

    //编辑
    let editArr = [
      {
        label: '复制',
        icon: 'mdi-content-copy',
        callback: copySelectedItems
      },
      {
        label: '粘贴',
        icon: 'mdi-content-paste',
        callback: pasteSelectedItems
      },
      {
        label: '删除',
        icon: 'mdi-delete-sweep',
        callback: removeSelectedItems
      },
      {
        label: '保存',
        icon: 'mdi-content-save-all',
        callback: onSavePage
      },
      {
        label: '存为模板',
        icon: 'mdi-instagram',
        callback: onSaveModule
      },
      {
        label: '预览',
        icon: 'mdi-camera',
        callback: onPreviewPage
      }
    ];

    //图层
    let layerArr = [
      {
        label: '置顶',
        icon: 'mdi-open-in-app',
        callback: setTopLayer
      },
      {
        label: '置底',
        icon: 'mdi-inbox',
        callback: setBottomLayer
      }
    ];

    return {
      alignArr,
      doArr,
      rotateArr,
      editArr,
      layerArr
    }
  }
})
</script>

<style scoped>
.my-tool-group {

}
</style>
